<template>
  <div>
    <div class="__table">
      <el-button @click="dialogOpen('add')"
                 v-if="!search"
                 class="__table_button"><i class="el-icon-plus"></i></el-button>
      <el-table
        :show-summary="true"
        :summary-method="summaryMethod"
        :data="sTable.data"
        style="width: 100%">
        <el-table-column align="center" label="出发">
          <el-table-column
            :formatter="formatterTableTime"
            prop="setoutTime"
            width="100px"
            align="center"
            label="时间">
          </el-table-column>
          <el-table-column
            prop="setoutAddress"
            align="center"
            label="地址">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="到达">
          <el-table-column
            :formatter="formatterTableTime"
            prop="arriveTime"
            width="100px"
            align="center"
            label="时间">
          </el-table-column>
          <el-table-column
            prop="arriveAddress"
            align="center"
            label="地址">
          </el-table-column>
          <el-table-column
            prop="arriveCityLeaveName"
            align="center"
            label="城市等级">
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="交通费">
          <el-table-column
            prop="trafficBillNumber"
            align="center"
            label="单据张数">
          </el-table-column>
          <el-table-column
            prop="trafficMoney"
            align="center"
            label="金额">
            <template scope="s">
              {{SplitK(s.row.trafficMoney)}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="出差补助">
          <el-table-column
            prop="travelDay"
            align="center"
            label="天数">
          </el-table-column>
          <el-table-column
            prop="travelMoney"
            align="center"
            label="金额">
            <template scope="s">
              {{SplitK(s.row.travelMoney)}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column align="center" label="其他费用">
          <el-table-column
            prop="otherProject"
            align="center"
            label="项目名称">
          </el-table-column>
          <el-table-column
            prop="otherBillNumber"
            align="center"
            label="单据张数">
          </el-table-column>
          <el-table-column
            prop="otherMoney"
            align="center"
            label="金额">
            <template scope="s">
              {{SplitK(s.row.otherMoney)}}
            </template>
          </el-table-column>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          v-if="!search"
          label="可用操作"
          width="120">
          <template scope="s">
            <el-button type="success" icon="el-icon-edit" size="mini" @click="dialogOpen('PUT', s.row, s.$index)"
                       round></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="tableDelete(s.$index)" round></el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <s-dialog :dialog="dialog">
      <p slot="title">
        {{dialog.title}}差旅费用报销单明细
        <span v-if="dialog.title === '修改'">报销人名称：{{dialog.row.bxSupplierName}}</span>
      </p>
      <s-form :form="formDialog" ref="formDialog">
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
          <el-form-item prop="setoutTime" label="出发时间">
            <el-date-picker
              v-model="formDialog.setoutTime"
              type="datetime"
              placeholder="出发时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
          <el-form-item prop="setoutAddress" label="出发地址">
            <el-input
              type="text"
              v-model="formDialog.setoutAddress"
              placeholder="出发地址"></el-input>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}">
            <el-form-item prop="arriveTime" label="到达时间">
              <el-date-picker
                v-model="formDialog.arriveTime"
                type="datetime"
                placeholder="到达时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}">
            <el-form-item prop="arriveAddress" label="到达地点">
              <el-input
                type="text"
                v-model="formDialog.arriveAddress"
                placeholder="到达地点"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}">
            <el-form-item prop="arriveCityLeave" label="城市等级">
              <el-select v-model="formDialog.arriveCityLeave"
                         ref="arriveCityLeave"
                         placeholder="到达城市等级">
                <el-option
                  v-for="item in TRAVEL.arriveCityLeave"
                  :key="item.id"
                  :label="item.text"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="trafficBillNumber" label="单据张数">
              <el-input
                type="text"
                v-model.number="formDialog.trafficBillNumber"
                placeholder="交通单据张数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="trafficMoney" label="交通金额">
              <el-input
                type="text"
                v-model.number="formDialog.trafficMoney"
                placeholder="交通金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}">
            <el-form-item prop="travelDay" label="出差天数">
              <el-input
                type="text"
                v-model.number="formDialog.travelDay"
                placeholder="出差天数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}">
            <el-form-item prop="travelMoney" label="补助金额">
              <el-input
                type="text"
                v-model.number="formDialog.travelMoney"
                placeholder="出差补助金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 7, offset: 0}">
            <el-form-item prop="otherProject" label="其他项目">
              <el-input
                type="text"
                v-model="formDialog.otherProject"
                placeholder="其他项目"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" v-if="formDialog.otherProject">
            <el-form-item prop="otherBillNumber" label="单据张数">
              <el-input
                type="text"
                v-model.number="formDialog.otherBillNumber"
                placeholder="其他项目单据张数"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 7, offset: 1}" v-if="formDialog.otherProject">
            <el-form-item prop="otherMoney" label="项目金额">
              <el-input
                type="text"
                v-model.number="formDialog.otherMoney"
                placeholder="其他项目金额"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </s-form>
      <el-button slot="footer" @click="dialogSave">保存</el-button>
    </s-dialog>
  </div>
</template>

<script>
  /* eslint-disable semi */

  import {AutoVue, AutoPromise, SplitK} from '~/plugins/Tools';

  /**
   * 报销单明细
   setoutTime  (string, optional): 时间$$$true$true$false$$1$vNull$false,
   setoutAddress  (string, optional): 地址$$$true$true$false$$2$vNull$false,
   arriveTime  (string, optional): 时间$$$true$true$false$$3$vNull$false,
   arriveAddress  (string, optional): 地点$$$true$true$false$$4$vNull$false,
   arriveCityLeave  (string, optional): 城市等级$$$true$true$true$urbanGrade$5$vNull$false,
   trafficMoney  (string, optional): 金额$$$true$true$true$urbanGrade$7$vNull,vNumber$false,
   trafficBillNumber  (string, optional): 单据张数$$$true$true$true$urbanGrade$6$vNull$false,
   travelDay  (string, optional): 天数$$$true$true$true$urbanGrade$8$vNull,vNumber$false,
   otherProject  (string, optional): 项目$$$true$true$true$urbanGrade$10$vNull$false,
   travelMoney  (string, optional): 金额$$$true$true$true$urbanGrade$9$vNull,vNumber$false,
   otherBillNumber  (string, optional): 单据张数$$$true$true$true$urbanGrade$11$vNull$false,
   otherMoney  (string, optional): 金额$$$true$true$true$urbanGrade$12$vNull,vNumber$false,
   */
  function __formDialog () {
    return {
      setoutTime: { value: new Date(), rule: [ 'vNull' ], type: 'Date' },
      setoutAddress: { value: '', rule: [ 'vNull' ] },
      arriveTime: { value: new Date(), rule: [ 'vNull' ], type: 'Date' },
      arriveAddress: { value: '', rule: [ 'vNull' ] },
      arriveCityLeave: { value: '2', rule: [ 'vNull__change' ] },
      trafficBillNumber: { value: '', rule: [ 'vNull', 'vNumber' ] },
      trafficMoney: { value: '', rule: [ 'vNull', 'vNumber' ] },
      travelDay: { value: '', rule: [ 'vNull', 'vNumber' ] },
      travelMoney: { value: '', rule: [ 'vNull', 'vNumber' ] },
      otherProject: { value: '', rule: [] },
      otherBillNumber: { value: '', rule: [ 'vNull', 'vNumber' ] },
      otherMoney: { value: '', rule: [ 'vNull', 'vNumber' ] },
    };
  }

  function tofixed (dt) {
    dt += '';
    let result;
    if (dt.indexOf('.') !== -1) {
      result = dt.substr(0, dt.indexOf('.') + 3);
    } else {
      result = dt;
    }
    return parseFloat(result);
  }

  export default AutoVue({
    name: 'travel',
    data: {
      sTable: {
        data: [],
        key: 'id',
        muti: false,
      },
      formDialog: __formDialog(),
      dialog: {
        modal: false,
        width: '80%',
        index: '',
        title: '新增',
        row: {},
      },
    },
    store: ['TRAVEL', 'DICTIONARY_travel'],
    props: {
      init: {
        type: Array,
      },
      search: {
        type: Boolean,
        default: false,
      },
    },
    methods: {
      SplitK,
      formatterTableTime (row, column, cellValue) {
        return this.formatterTime(cellValue, 6);
      },
      summaryMethod ({ columns, data }) {
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          switch (index) {
          case 5:
          case 6:
          case 7:
          case 8:
          case 10:
          case 11:
          case 12:
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            } else {
              sums[index] = '';
            }
            break;
          default:
            sums[index] = '';
          }
        });
        sums[6] = SplitK(sums[6]);
        sums[8] = SplitK(sums[8]);
        sums[11] = SplitK(sums[11]);

        return sums;
      },
      tableDelete (index) {
        let tableRef = 'sTable';
        this.$confirm('您将删除该条明细。', '确认删除？', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning',
        }).then(async () => {
          this[tableRef].data.splice(index, 1);
          this.$emit('change', this.sTable.data);
        });
      },
      async dialogOpen (type, more, index) {
        if (type) {
          type = type.toUpperCase();
        } else return;
        await AutoPromise([
          async () => {
            if (!this.DICTIONARY_travel) {
              await this.USE('DICTIONARY_travel');
            }
          },
        ]);
        switch (type) {
        case 'ADD':
          this.dialog.title = '新增';
          this.formDialog.id = 0;
          break;
        case 'PUT':
          this.dialog.title = '修改';
          this.$nextTick(() => {
            this.formDialog = {
              ...this.formDialog,
              ...this.ObjectClone(__formDialog(), more),
            };
          });
          this.dialog.row = more;
          this.dialog.index = index;
          break;
        }
        this.dialog.visible = true;
      },
      dialogSave: function () {
        this.VALIDATE('formDialog', option => {
          console.log('option', option);
          let otherMoney = option.otherMoney;
          let trafficMoney = option.trafficMoney;
          let travelMoney = option.travelMoney;
          if (otherMoney !== 0 && otherMoney !== '') {
            option.otherMoney = tofixed(otherMoney);
          }
          if (trafficMoney !== 0 && trafficMoney !== '') {
            option.trafficMoney = tofixed(trafficMoney);
          }
          if (travelMoney !== 0 && travelMoney !== '') {
            option.travelMoney = tofixed(travelMoney);
          }
          option.arriveCityLeaveName = this.$refs.arriveCityLeave.selectedLabel
          if (!option.otherProject) {
            option.otherProject = '无'
            option.otherBillNumber = 0
            option.otherMoney = 0
          }
          if (this.dialog.index === '') {
            this.sTable.data.push(option)
          } else {
            this.sTable.data.splice(this.dialog.index, 1)
            this.sTable.data.unshift(option)
          }
          this.$emit('change', this.sTable.data)
          this.dialog.dialogInit.call(this)
        })
      },
    },
    mounted () {
      if (this.init && this.init.length !== 0) {
        this.sTable.data = this.init;
        this.$emit('change', this.sTable.data);
      }
    },
  });
</script>

<style scoped lang="scss">
  .card {
    float: left;
    border-radius: 3px;
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, .1);
    height: 110px;
    width: 300px;
    margin: 15px;
    padding: 25px;
    position: relative;
    vertical-align: top;
    transition: .4s;
    cursor: pointer;
    &:hover {
      box-shadow: 0 10px 20px 1px rgba(0, 0, 0, .1);
      text-decoration: none;
    }
  }

  .card__icon {
    font-size: 24px;
    left: 28px;
    position: absolute;
    top: 25px;
    color: #20a0ff;
  }

  .card__title {
    color: #20a0ff;
    margin-top: 0;
    margin-bottom: 10px;
    margin-left: 40px;
  }

  .card__body {
    line-height: 22px;
    margin-left: 40px;
  }

  @media screen and (max-width: 800px) {
    .card {
      width: calc(100% - 80px);
    }
  }
</style>


<style lang="scss">
  .demo-table-expand {
    font-size: 0;
    background-color: #fbfdff;
    .el-form-item {
      margin-bottom: 0;
    }
    .__content {
      margin-bottom: 10px;
    }
  }

  .__table {
    position: relative;
    .el-form-item {
      .el-form-item__content {
        /*width: calc(100% - 10px);*/
        /*padding-left: 10px;*/
        /*width:100%;*/
        width:calc(100% - 80px);
        >span{
          word-wrap: break-word;
        }
      }
    }
    .__table_button {
      position: absolute;
      z-index: 4;
      width: 42px;
      color: #48576a;
      height: 50px;
      border: none;
      outline: none;
      background: rgba(0, 0, 0, 0);
      transition: all .5s;
      padding: 14px;
      &:hover{
        transform: scale(1.2) rotate(360deg);
        color: #4c77dc;
      }
    }
    .__table_index_button {
      position: absolute;
      width: 100%;
      top: 0;
      left: 0;
      height: 100%;
      border: none;
      background: rgba(0, 0, 0, 0);
      outline: none;
    }
    .el-table__fixed,.el-table__fixed-right {
      box-shadow: none;
    }
    .el-table-column--selection .cell {
      padding: 0;
    }
    .el-table__expanded-cell{
      .el-form-item {
        margin-bottom: 22px;
        width: calc(20% - 10px);
        .el-form-item__content {
          width:100%;
        }
      }
      z-index: 4;
      .el-form--inline .el-form-item__label{
        color: #4c77dc;
        font-weight: bolder;
      }
    }
    .index {
      .cell {
        padding: 0;
      }
    }
    .operationMore{
      .cell {
        padding: 0;
      }
      .el-button--mini{
        min-width: 22px;
      }
    }
    .el-table__fixed-header-wrapper{
      .index >.cell{
        color: #eef1f6;
      }
    }
    .__reference{
      margin-left: 5px;
    }
    .el-input-number {
      min-width: 80px;
      width: 100%;
    }
  }
</style>
